<template>
  <div class="datalist">
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="caseEmpReq.keyword"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="text"
        style="margin-left: 20px"
        size="small"
        @click="
          caseEmpReq.pageIndex = 1
          getCaseEmployees()
        "
      >
        搜索
      </el-button>
      <el-button
        type="text"
        style="margin-left: 20px"
        size="small"
        @click="addCaseEmpVis = true"
      >
        添加
      </el-button>
    </div>
    <div class="content">
      <div style="flex: auto">
        <el-table
          height="calc(100% - 40px)"
          style="overflow: auto"
          :data="caseEmpRes.Items"
          stripe
          border
          highlight-current-row
        >
          <el-table-column type="index" width="60"></el-table-column>
          <el-table-column label="身份" width="160">
            <template slot-scope="scope">
              {{ scope.row.CSEP_TypeDesc }}
            </template>
          </el-table-column>
          <el-table-column label="公司">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.CMP_Status < 0">
                {{ scope.row.CMP_StatusDesc }}
              </el-tag>
              {{ scope.row.CMP_Name }}
            </template>
          </el-table-column>
          <el-table-column label="员工">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.EMP_Status == -2">
                {{ scope.row.EMP_StatusDesc }}
              </el-tag>
              <el-link
                @click="
                  curCaseEmp = scope.row
                  editEmplayeeRateVis = true
                "
                style="color: blue"
              >
                {{ scope.row.USR_Name }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="联系方式">
            <template slot-scope="scope">
              {{ scope.row.USR_Phone }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="
                  curCaseEmp = scope.row
                  editCaseEmpVis = true
                "
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                icon="el-icon-delete"
                @click="deleteCaseEmployee(scope.row.CSEP_ID)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          layout="total,prev,pager,next,sizes"
          style="float: right"
          background
          :current-page.sync="caseEmpReq.pageIndex"
          :total="caseEmpRes.Total"
          :page-size="caseEmpReq.pageSize"
          :page-sizes="[10, 15, 20]"
          @size-change="
            (val) => {
              caseEmpReq.pageSize = val
              getCaseEmployees()
            }
          "
          @current-change="getCaseEmployees()"
        ></el-pagination>
      </div>
    </div>

    <el-drawer title="新增" :visible.sync="addCaseEmpVis" direction="rtl">
      <el-form label-width="100px" style="margin-top: 20px; width: 80%">
        <el-form-item label="身份">
          <el-select
            v-model="newCaseEmp.CSEP_Type"
            filterable
            placeholder="请选择身份"
          >
            <el-option
              v-for="item in caseEmpTypes"
              :key="item.EnumValue"
              :label="item.Description"
              :value="item.EnumValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司">
          <el-select
            v-model="newCaseEmp.CSEP_CompanyID"
            filterable
            remote
            reserve-keyword
            placeholder="请输入员工公司进行搜索"
            :remote-method="getCompanies"
            @change="chooseCompany(newCaseEmp)"
          >
            <el-option
              v-for="item in companies"
              :key="item.CMP_ID"
              :label="item.CMP_Name"
              :value="item.CMP_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工">
          <el-select
            v-model="newCaseEmp.CSEP_EmployeeID"
            filterable
            placeholder="请选择员工"
          >
            <el-option
              v-for="item in employees"
              :key="item.ECV_TargetID"
              :label="item.USR_Name"
              :value="item.ECV_TargetID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addCaseEmployee()">新增</el-button>
          <el-button type="text" @click="addCaseEmpVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="编辑" :visible.sync="editCaseEmpVis" direction="rtl">
      <el-form
        label-width="80px"
        style="margin-top: 20px; width: 80%"
        v-if="curCaseEmp"
      >
        <el-form-item label="身份">
          <el-select
            v-model="curCaseEmp.CSEP_Type"
            filterable
            placeholder="请选择身份"
            style="width: 300px"
          >
            <el-option
              v-for="item in caseEmpTypes"
              :key="item.EnumValue"
              :label="item.Description"
              :value="item.EnumValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司" v-if="curCaseEmp.CSEP_CompanyID">
          <el-input
            v-model="curCaseEmp.CMP_Name"
            style="width: 300px"
            clearable
            readonly
          >
            <el-button
              slot="append"
              @click="
                curCaseEmp.CMP_Name = null
                curCaseEmp.USR_Name = null
                curCaseEmp.CSEP_CompanyID = null
                curCaseEmp.CSEP_EmployeeID = null
              "
            >
              修改
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="公司" v-if="!curCaseEmp.CSEP_CompanyID">
          <el-select
            v-model="curCaseEmp.CSEP_CompanyID"
            filterable
            remote
            reserve-keyword
            placeholder="请输入员工公司进行搜索"
            :remote-method="getCompanies"
            @change="chooseCompany(curCaseEmp)"
            style="width: 300px"
          >
            <el-option
              v-for="item in companies"
              :key="item.CMP_ID"
              :label="item.CMP_Name"
              :value="item.CMP_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工" v-if="curCaseEmp.CSEP_EmployeeID">
          <el-input
            v-model="curCaseEmp.USR_Name"
            style="width: 300px"
            clearable
            readonly
          >
            <el-button
              slot="append"
              @click="
                curCaseEmp.USR_Name = null
                curCaseEmp.CSEP_EmployeeID = null
                chooseCompany(curCaseEmp)
              "
            >
              修改
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item
          label="员工"
          v-if="!curCaseEmp.CSEP_EmployeeID"
          @click="curCaseEmp.CSEP_EmployeeID = null"
        >
          <el-select
            v-model="curCaseEmp.CSEP_EmployeeID"
            filterable
            placeholder="请选择员工"
            style="width: 300px"
            @change="
              curCaseEmp.USR_Name = employees.find(
                (x) => x.ECV_TargetID == curCaseEmp.CSEP_EmployeeID
              ).USR_Name
            "
          >
            <el-option
              v-for="item in employees"
              :key="item.ECV_TargetID"
              :label="item.USR_Name"
              :value="item.ECV_TargetID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="editCaseEmployee()">保存</el-button>
          <el-button type="text" @click="editCaseEmpVis = false">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-dialog
      title="提成率修改"
      :visible.sync="editEmplayeeRateVis"
      width="400px"
      :modal-append-to-body="false"
      center
    >
      <editEmplayeeRate
        v-if="curCaseEmp"
        :empId="curCaseEmp.ECV_TargetID"
        @saved="editEmplayeeRateVis = false"
        @canceled="editEmplayeeRateVis = false"
      />
    </el-dialog>
  </div>
</template>
<script>
import {
  getCaseEmployeeTypes,
  getCompanies,
  getEmployees,
  getCaseEmployees,
  addCaseEmployee,
  editCaseEmployee,
  deleteCaseEmployee,
} from '@/api/core/caseEmployee'
import editEmplayeeRate from '@/views/web/orgnization/components/editEmplayeeRate.vue'
export default {
  props: ['caseId'],
  components: { editEmplayeeRate },
  data: function () {
    return {
      caseEmpTypes: [],
      companies: [],
      employees: [],

      caseEmpReq: {
        caseId: null,
        keyword: '',
        pageIndex: 1,
        pageSize: 10,
      },
      caseEmpRes: {
        Items: [],
        Total: 0,
      },
      newCaseEmp: {},
      curCaseEmp: null,
      addCaseEmpVis: false,
      editCaseEmpVis: false,
      editEmplayeeRateVis: false,
    }
  },
  methods: {
    chooseCompany(caseEmp) {
      let company = this.companies.find(
        (x) => x.CMP_ID == caseEmp.CSEP_CompanyID
      )
      if (company) {
        caseEmp.CMP_Name = company.CMP_Name
      }
      getEmployees({
        cmpId: caseEmp.CSEP_CompanyID,
      }).then(({ data }) => {
        this.employees = data
      })
    },
    getCaseEmployeeTypes() {
      getCaseEmployeeTypes().then(({ data }) => {
        this.caseEmpTypes = data
      })
    },
    getCompanies(keyword) {
      if (keyword.length >= 2) {
        getCompanies({
          keyword,
        }).then(({ data }) => {
          this.companies = data.Items
        })
      }
    },
    getEmployees() {
      getEmployees().then(({ data }) => {
        this.employees = data
      })
    },
    getCaseEmployees() {
      this.caseEmpReq.caseId = this.caseId
      getCaseEmployees(this.caseEmpReq).then(({ data }) => {
        this.caseEmpRes = data
      })
    },
    addCaseEmployee() {
      this.newCaseEmp.CSEP_CaseID = this.caseId
      addCaseEmployee(this.newCaseEmp).then(() => {
        this.getCaseEmployees()
        this.addCaseEmpVis = false
      })
    },
    editCaseEmployee() {
      editCaseEmployee(this.curCaseEmp).then(() => {
        this.getCaseEmployees()
        this.editCaseEmpVis = false
      })
    },
    deleteCaseEmployee(id) {
      this.$confirm(`是否删除该信息`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteCaseEmployee(id).then(() => {
          this.getCaseEmployees()
        })
      })
    },
  },
  created: function () {
    if (!this.caseId) {
      return
    }
    this.getCaseEmployeeTypes()
    this.getCaseEmployees()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.row {
  height: 100%;
}
.col {
  height: 100%;
}
.col .col_header {
  background: #d9e5fe;
  padding-left: 10px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.col .col_content {
  height: calc(100% - 80px);
  background: white;
  display: flex;
  flex-direction: column;
}
.col .col_content .tree {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
</style>
